<template>
	<div class="page">
		<!-- navbar -->
		<div class="navbar">
			<i class="Icon" style="color: #000000;font-size: 20px;" @click="backHandle()">arrow_back_ios_new</i>
			<div style="div-align: center;">Confirmaion</div>
			<i class="Icon" style="color: #000000;font-size: 20px;"></i>
		</div>
		<!-- body -->
		<div class="body">
			<i class="Icon" style="font-size: 160px;color:#74eb41;">check_circle</i>
			<div style="width: 60%;div-align: center;font-size: 14px;margin-top: 12px;color: #666666;">Your order has
				success submited to the shop</div>
		</div>

		<!-- bottom -->
		<div style="padding: 12px;padding-top: 0;">
			<div style="display: flex;align-items: center;justify-content: space-between;margin-top: 12px;">
				<div>Totail Fee</div>
				<div>$12.00</div>
			</div>
			<div style="display: flex;align-items: center;justify-content: space-between;margin-top: 12px;">
				<div>Totail Fee</div>
				<div>$12.00</div>
			</div>
			<!-- pay -->
			<div class="paybtn" @click="orderHandle()">
				<div>MyOrder</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			backHandle() {
				this.$router.replace({
					path: "/"
				})
			},
			orderHandle() {
				this.$router.replace({
					path: "/order"
				})
			}
		}
	}
</script>

<style scoped>
	.page {
		height: 100vh;
		flex: 1;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
	}

	.navbar {
		height: 64px;
		padding-left: 12px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #FFFFFF;
	}

	.body {
		flex: 1;
		overflow-y: auto;
		background-color: #F5F5F5;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.paybtn {
		height: 44px;
		background-color: #74eb41;
		margin-top: 12px;
		color: #FFFFFF;
		border: none;
		box-shadow: 0 0 3px #74eb41;
		display: flex;
		align-items: center;
		justify-content: space-around
	}
</style>
